@import "common";
.wrap{
    height: r(1514px);
}
header {
    font-size: 0;
    position: relative;
    .banner-top {
        width: r(640px);
        height: r(215px);
    }
    .banner-btn {
        top: r(230px);
        left: r(24px);
        position: absolute;
        width: r(305px);
        height: r(55px);
    }
}

.head-banner {
    position: relative;
    width: r(640px);
    height: r(305px);
    background-image: url(../images/banner.jpg);
    background-size: r(640px) r(305px);
    //  >img {
    //      display: block;
    //      width: r(640px);
    //      height: r(305px);
    //  }
    .mask {
        bottom: 0;
        position: absolute;
        width: r(640px);
        height: r(104px);
        background: rgba(0, 0, 0, 0.5);
        >p {
            font-size: r(26.63px);
            color: white;
            text-align: center;
            margin-top: r(23px);
        }
        .heart {
            font-size: 0;
            margin: {
                top: r(11px);
                bottom: r(13px);
                right: r(49px);
                left: r(31px);
            }
            color: white;
            .heart-icon {
                font-size: r(18px);
                margin-right: r(6px);
                vertical-align: middle;
            }
            >span {
                font-size: r(17.76px);
                vertical-align: middle;
            }
        }
        .view {
            font-size: 0;
            margin: {
                top: r(8px);
                bottom: r(13px);
                right: r(96px);
            }
            color: white;
            .icon-view {
                font-size: r(23px);
                margin-right: r(6px);
                vertical-align: middle;
            }
            >span {
                font-size: r(17.76px);
                vertical-align: middle;
            }
        }
        .point {
            margin-top: r(11px);
            width: r(79px);
            height: r(11px);
            ul li {
                float: left;
                color: rgba(255, 255, 255, 0.5);
                font-size: r(26px);
                margin-left: r(15px);
                &:first-of-type {
                    color: rgba(255, 0, 0, 0.5);
                }
            }
        }
        .date {
            margin-top: r(11px);
            margin-right: r(21px);
            width: r(175px);
            height: r(20px);
            font-size: 0;
            span {
                font-size: r(17.76px);
                color: white;
            }
        }
    }
}

section {
    margin-top: r(44px);
    width: r(640px);
    height: r(714px);
    .list-contain {
        width: r(583px);
        height: r(594px);
        .list-item {
            width: r(582px);
            height: r(173px);
            margin-bottom: r(47px);
            border-bottom: 1px solid #cecece;
            &:nth-last-of-type{
                margin-bottom: 0;
            }
            >img {
                width: r(209px);
                height: r(141px);
            }
            .list-detail {
                width: r(358px);
                height: r(144px);
                .title {
                    margin-bottom: r(10px);
                    font-size: r(22px);
                    width: r(355px);
                    height: r(54px);
                }
                .detail {
                    color: $icon-color;
                    width: r(357px);
                    height: r(47px);
                    font-size: r(20px);
                }
                .datediv {
                    margin-left: r(102px);
                    margin-top: r(20px);
                    width: r(255px);
                    height: r(16px);
                    ul li {
                        color: $icon-color;
                        list-style: none;
                        float: left;
                    }
                    .date {
                        font-size: r(18px);
                        margin-right: r(15px);
                    }
                    .heart {
                        margin-right: r(15px);
                        font-size: 0;
                        color: $icon-color;
                        .heart-icon {
                            font-size: r(18px);
                            margin-right: r(6px);
                        }
                        >span {
                            font-size: r(17.76px);
                        }
                    }
                    .view {
                        font-size: 0;
                       
                        color: $icon-color;
                        .icon-view {
                            font-size: r(23px);
                            margin-right: r(6px);
                            vertical-align: middle;
                        }
                        >span {
                            font-size: r(17.76px);
                            vertical-align: middle;
                        }
                    }
                }
            }
        }
    }
     .loadmore{
        width: r(581px);
        height: r(73px);
        
        margin-top: r(20px);
        color: $icon-color;
        text-align: center;
        line-height: r(73px);
        >P{
            font-size: r(22px);
            
        }
    }
}